import React, { memo, forwardRef, useCallback } from 'react';
import { Input } from 'antd';

function TrimInput(props: any, ref: any) {
  const { onInput, isNumber, ...extra } = props;
  const handleInput = useCallback(
    (e) => {
      e.target.value = e.target.value.trim();
      if (isNumber) {
        e.target.value = e.target.value.replace(/[^\d]/g, '');
      }
      typeof onInput === 'function' && onInput(e.target.value);
    },
    [isNumber, onInput],
  );

  return <Input ref={ref} {...extra} onInput={handleInput} />;
}

export default memo(forwardRef(TrimInput));
